import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Container容器组件，类似于div')),
        body: Column(children: [Myapp(), MyBtn(), MyText()]),
      ),
    ),
  );
}

//Container容器组件 类似于div
class Myapp extends StatelessWidget {
  const Myapp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        margin: EdgeInsets.fromLTRB(0, 60, 0, 0),
        //容器组件 类似于div
        alignment: Alignment.center, //配置Container容器内元素的方位
        width: 200,
        height: 200,
        // transform: Matrix4.translationValues(20, 40, 0),//x轴，y轴平移
        // transform: Matrix4.rotationZ(0.2),//旋转
        transform: Matrix4.skewY(0.2), //Y轴倾斜
        decoration: BoxDecoration(
          color: const Color.fromARGB(255, 34, 255, 60), //背景颜色
          border: Border.all(color: Colors.red, width: 2), //配置边框
          borderRadius: BorderRadius.circular(10), //配置圆角
          boxShadow: [BoxShadow(color: Colors.blue, blurRadius: 20)], //配置阴影
          //LinearGradient 背景线性渐变 RadialGradient径向渐变
          gradient: LinearGradient(
            colors: [Colors.red, Colors.blue],
            begin: Alignment.bottomLeft,
          ), //线性渐变
          // gradient: RadialGradient(
          //   colors: [Colors.red, Colors.blue],
          // ), //经向渐变
        ),
        child: Text(
          'decoration设置背景',
          style: TextStyle(color: Colors.black, fontSize: 20),
        ),
      ),
    );
  }
}

//案例:实现一个按钮
class MyBtn extends StatelessWidget {
  const MyBtn({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(10),
      ),
      width: 200,
      height: 50,
      // margin:EdgeInsets.all(20) //四周margin
      margin: EdgeInsets.fromLTRB(0, 40, 0, 0),
      // padding: EdgeInsets.all(2),
      padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
      child: Text(
        '按钮',
        style: TextStyle(
          color: Colors.white,
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }
}

//Text 组件
class MyText extends StatelessWidget {
  const MyText({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 40, 0, 0),
      width: 200,
      height: 200,
      decoration: BoxDecoration(color: Colors.pink[100]),
      child: Text(
        '我是Text组件我是Text组件我是Text组件我是Text组件我是Text组件',
        maxLines: 2, //最大行数
        overflow: TextOverflow.ellipsis, //超出省略号
        textAlign: TextAlign.left, //文本对齐方式
        style: TextStyle(
          color: Colors.blue,
          fontSize: 20,
          fontWeight: FontWeight.w900,
          fontStyle: FontStyle.italic,//斜体
          letterSpacing: 5,//字符间距
          decoration:TextDecoration.underline,//文字装饰线（none没有线，lineThrough删除线，overline上划线，underline下划线）
          decorationColor: Colors.red, //
          decorationStyle:TextDecorationStyle.wavy,//文字装饰线风格
        ),
      ),
    );
  }
}
